.member-head {
	position: relative;
	.memeber-bg {
		display: block;
		width: 100%; 
		height: 600rpx; 
	}
}

.head-box {
	position: absolute; 
	bottom: 12rpx;
	left: 0;
	width: 100%; 
	.user-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 30rpx 30rpx 40rpx;

		.img-box {
			min-width: 115rpx;

			.img {
				display: block;
				width: 115rpx;
				height: 115rpx;
				border-radius: 50%;
			}
		}

		.info-box {
			flex: 1;
			padding: 0 20rpx;

			.name {
				font-size: 32rpx;
				font-weight: 600;
				color: #fff;
				margin-bottom: 10rpx;
			}

			.price {
				font-size: 27rpx;
				font-weight: 400;
				color: #fff;
			}
		}

		.icon-box {
			.icon {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.login {
			font-size: 27rpx;
			color: #fff;
		}
	}
	.user-info-num-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 20rpx 30rpx;
		.item {
			width: 23%;
			padding: 30rpx 0;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 10rpx;
			.num {
				text-align: center;
				font-size: 35rpx;
				color: #fff;
			}
			.tit {
				font-size: 24rpx;
				text-align: center;
				color: #fff;
				margin-top: 10rpx;
			}
		}
	}
	.member-box {
		.member-content {
			width: 88%;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.content {
				display: flex;
				align-items: center;

				.grade {
					font-size: 27rpx;
					font-weight: 400;
					padding-right: 20rpx;
					color: #fff;
				}

				.integral {
					position: relative;
					padding-left: 20rpx;
					font-size: 27rpx;
					font-weight: 400;
					color: #ffebd0;

					&::before {
						display: block;
						content: '';
						position: absolute;
						left: 0;
						top: 60%;
						transform: translateY(-50%);
						width: 1px;
						height: 60%;
						background-color: #d9d9d9;
					}
				}
			}

			.view-detail {
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(180deg, #f8e4cc 0%, #fddabc 100%);
				border-radius: 100px;
				padding-left: 18rpx;
				width: 150rpx;
				line-height: 50rpx;

				.tit {
					font-size: 24rpx;
				}
			}
		}
	}
}

.view-box {
	padding: 25rpx;
	background-color: #fff;
	margin-bottom: 30rpx;
	border-radius: 15rpx;

	.title {
		font-size: 30rpx;
		font-weight: 600;
		margin-bottom: 25rpx;
	}
}

.order-box {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.item {
		position: relative;

		.img {
			display: block;
			width: 90rpx;
			height: 90rpx;
		}

		.name {
			text-align: center;
			font-size: 24rpx;
		}

		.nums {
			position: absolute;
			right: -5rpx;
			top: 5rpx;
			border-radius: 50%;
			font-size: 20rpx;
			width: 30rpx;
			height: 30rpx;
			text-align: center;
			line-height: 30rpx;
			background-color: #d33123;
			border: 2px solid #fff;
			color: #fff;
		}
	}
}

.invitation-box {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.item {
		display: flex;
		align-items: center;

		.img {
			display: block;
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
		}

		.tit-desc {
			.tit {
				font-size: 28rpx;
				color: #292b2e;
				margin-bottom: 10rpx;
			}

			.desc {
				font-size: 24rpx;
				color: #989fa9;
			}
		}
	}
}

.service-box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-top: -20rpx;
	.item {
		width: 25%;
		margin-top: 40rpx;
		.img {
			display: block;
			width: 65rpx;
			height: 65rpx;
			margin: 0 auto 10rpx;
		}

		.tit {
			font-size: 22rpx;
			color: #292b2e;
			text-align: center;
		}
	}
}
